<template>
  <div class="login">
    <div class="logo">
      <img src="../../assets/kk.png" alt />
    </div>
    <div class="sm_con">
      <div class="m-input-box">
        <img class="tt1" src="../../assets/account.png" alt />
        <input
          class="m-input"
          type="text"
          name="userName"
          placeholder="请输入手机"
          maxlength="40"
          v-model="mobile"
        />
      </div>
      <div class="m-input-box">
        <img class="tt2" src="../../assets/mima.png" alt />
        <input
          class="m-input"
          ref="pas"
          type="password"
          name="password"
          placeholder="请输入密码"
          maxlength="16"
          v-model="password"
        />
      </div>
      <div class="forget">
        <router-link to="/forget">忘记密码</router-link>
      </div>
      <div class="loginto" @click="login()">登录</div>
      <div class="l_bo">
        <div class="psd_login">
          <router-link to="/">验证码登录</router-link>
        </div>
        <div class="reg">
          <router-link to="/register">注册账号</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      istrue: true,
      mobile: "",
      password: "",
      modalShow: true,
      sendAuthCode: true,
      auth_time: 0
    };
  },
  created() {},
  methods: {
    get_code: function() {
      this.sendAuthCode = false;
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
    login() {
      this.$toast({
        message: "登录成功",
        duration: 1500
      });
      setTimeout(() => {
        this.$router.push({ path: "/index" });
      }, 1500);
    }
  },
  mounted: function() {}
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.forget {
  text-align: right;
  margin-top: 0.213333rem;
  a {
    color: #fff;
  }
}
.login {
  background: url("../../assets/login_bg.png") no-repeat fixed;
  background-size: cover;
  min-height: 100%;
  .sm_con {
    width: 88%;
    margin: auto;
  }
  .logo {
    img {
      width: 3.413333rem;
      height: 3.706667rem;
      margin-top: 0.8rem;
    }
  }
  color: #fff;
  .m-input-box {
    .f-flex();
    position: relative;
    padding-top: 0.106667rem;
    padding-bottom: 0.106667rem;
    margin-top: 1.333333rem;
    border-bottom: 1px solid #fff;
    .tt1 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .tt2 {
      width: 0.506667rem;
      height: 0.586667rem;
      margin-right: 0.533333rem;
    }
    .m-input {
      width: 60%;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.4rem;
    }
    ::-webkit-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    ::-moz-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    :-ms-input-placeholder {
      color: #e5e5e5;
      font-size: 0.4rem;
    }
    .get_code {
      position: absolute;
      right: 0.2rem;
      font-size: 0.4rem;
      color: #fff;
    }
  }
  .loginto {
    height: 1rem;
    .f-flex();
    background: #546ce3;
    justify-content: center;
    width: 100%;
    border: 1px solid #fff;
    margin-top: 1.24rem;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    border-radius: 0.266667rem;
    font-size: 0.48rem;
  }
  .l_bo {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    font-size: 0.4rem;
    margin-top: 0.16rem;
    padding-bottom: 1rem;
    a {
      font-size: 0.4rem;
      color: #fff;
    }
  }
}
</style>
